<template>
  <view class="img_cnt_video l_f_r_c_c">

  <video v-if="!poster" class="img video"  :src="src" :change:src="video.setPoster"></video>
  <image class="img" :src="poster" mode="aspectFit" ></image>
    <up-icon class="icon" icon="play-circle" size="50" color="#fff"></up-icon>
  </view>

</template>

<script>
export default {
  data() {
    return {
      poster: '',
    }
  },
  props: {
    src: {
      type: String,
      default: ''
    }
  },
  methods: {
    getPoster(poster) {
      if(poster){
        this.poster = poster

      }
    }
  }
}
</script>

<script lang="renderjs" module="video" >
export default {
  methods: {
    setPoster(newV, oldV, ownerInstance) {
      let video = document.createElement("video");
      video.setAttribute('crossOrigin', 'anonymous'); //处理跨域
      video.setAttribute('src', newV);
      // 可以手动设置视频大小，图片页默认同视频一样大
      //video.setAttribute('width', 1000);
      //video.setAttribute('height', 500);
      // 表示可以下载整个视频文件，即使用户不希望使用它。这样才能获取到视频文件
      video.setAttribute('preload', 'auto');
      video.setAttribute('autoplay', true);
      // loadeddata 事件在媒体当前播放位置的视频帧（通常是第一帧）加载完成后触发。
      video.addEventListener('loadeddata', function() {
        let canvas = document.createElement("canvas"),
        width = video.videoWidth, //canvas的尺寸和图片一样
        height = video.videoHeight;
        canvas.width = width;
        canvas.height = height;
        canvas.getContext("2d").drawImage(video, 0, 0, width, height); //绘制canvas
        let poster = canvas.toDataURL('image/jpeg'); //转换为base64
        ownerInstance.callMethod('getPoster', poster)
        const bitmap = new plus.nativeObj.Bitmap('test');
        //下面代码可以用来将b64转图片存本地用于文件上传
        //bitmap.loadBase64Data(poster, () => {
        //	const url = '_doc/poster.png'
        //	bitmap.save(url, {
        //		overwrite: true
        //	}, e => {
        //		const {
        //			target
        //		} = e
        //		console.log(target, 'target');
        //		ownerInstance.callMethod('selectedImage', target)
        //	})
        //})
      });
    }
  }
}
</script>
<style lang="scss">
.img_cnt_video {
  overflow: hidden;
  position: relative;
  .video{
    position: absolute;
    width: 220rpx;
    height: 220rpx;
    left: -10000rpx;
    top: -10000rpx;
  }
  .icon{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index:1;
  }
}

</style>


